﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="ClientSideEditing.aspx.cs" Inherits="ControlExplorer.C1GridView.Editing1" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1GridView" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
	<style type="text/css">
		legend
		{
			background-color: transparent;
		}
		
		.wijmo-wijgrid .wijmo-wijinput .wijmo-wijinput-trigger .ui-icon
		{
			margin-top: 0px;
		}
	</style>

	<script type="text/javascript">
		function beforeCellEdit(e, args) {
			if (args.cell.column().dataField === "ShippedDate") {
				$("<input />")
					.width("100%")
					.appendTo(args.cell.container().empty())
					.wijinputdate({
						date: args.cell.value(),
						showTrigger: true
					});

				args.handled = true;
			}
		}

		function beforeCellUpdate(e, args) {
			if (args.cell.column().dataField === "ShippedDate") {
				args.value = args.cell.container()
					.find("input")
					.wijinputdate("option", "date");
			}
		}

		function afterCellEdit(e, args) {
			if (args.cell.column().dataField === "ShippedDate") {
				args.cell.container()
					.find("input")
					.wijinputdate("destroy");
			}
		}
	</script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>

	<wijmo:C1GridView ID="C1GridView1" runat="server"
		AutoGenerateDeleteButton="true" AllowClientEditing="true" DataKeyNames="OrderID" HighlightCurrentCell="true" ShowRowHeader="true"
		OnRowUpdating="C1GridView1_RowUpdating" OnEndRowUpdated="C1GridView1_EndRowUpdated" OnRowDeleting="C1GridView1_RowDeleting" AllowKeyboardNavigation="true"
		
		OnClientBeforeCellEdit="beforeCellEdit" OnClientBeforeCellUpdate="beforeCellUpdate" OnClientAfterCellEdit="afterCellEdit">
		<CallbackSettings Action="Editing" />
	</wijmo:C1GridView>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="Description" runat="server">
	<p>
		<strong>C1GridView</strong>支持客户端编辑. 此示例演示当使用客户端编辑和提供客户端自定义编辑器时，
        如何更新存储在会话对象中的数据集。
	</p>

	<p>在此示例使用下列属性：</p>
	<ul>
		<li><strong>AllowClientEditing</strong> - 让最终用户编辑当前单元格的值。</li>
		<li><strong>AllowKeyboardNavigation</strong> - 允许最终用户使用键盘改变当前单元格的位置。</li>
		<li><strong>HighlightCurrentCell</strong> -以突出显示当前单元格的位置。</li>
	</ul>

	<p>
		此示例中使用下面的客户端事件处理程序在<strong>发货（wijinputdate）</strong>栏中创建一个自定义编辑器：
	</p>
	<ul>
		<li><strong>OnClientBeforeCellEdit</strong> - 编辑前创建自定义编辑器。</li>
		<li><strong>OnClientBeforeCellUpdate</strong> - 编辑之前完成将编辑的值传递到表格的工作。</li>
		<li><strong>OnClientAfterCellEdit</strong> - 当编辑完成后摧毁编辑。</li>
	</ul>

	<p>此示例使用下面的服务器端事件处理程序：</p>
	<ul>
		<li><strong>RowUpdating</strong> - 从客户端得到的值更新数据源。</li>
		<li><strong>EndRowUpdating</strong> - 提交更改。</li>
	</ul>

	<p>当前单元格在编辑模式下，如果</p>
	<ul>
		<li>它是用鼠标左键双击的。</li>
		<li><strong>F2</strong>键盘上的键被按下（光标放置在编辑器区域）。</li>
		<li>任何字母数字键被按下（原始值被输入符号代替）</li>
	</ul>

	<p>编辑当前单元格致力于：</p>
	<ul>
		<li>当前单元格的位置改变。</li>
		<li><strong>F2</strong> 或按<strong>Enter</strong> 键（仅适用于默认编辑器）</li>
	</ul>

	<p>按 <strong>Esc</strong> 键，将取消当前单元格恢复原始值的编辑。</p>

	<p>当前行的位置改变，将累计发送到服务器。</p>
</asp:Content>